<template>
  <div class="panel-left-2 common-panpel">
          <div class="angle angle-left-top"></div>
          <div class="angle angle-left-bottom"></div>
          <div class="angle angle-right-top"></div>
          <div class="angle angle-right-bottom"></div>
          <div style="padding: 25px 25px 10px 25px">
            <div class="subTit"><img :src="require('@/assets/icon/' + this.cImg)" width="28px" />{{title}}</div>
            <div :id="domId" :style="{ width: '100%', height: vHeight }"></div>
          </div>
        </div>
</template>

<script>
export default {
  components: {},
  props: {
    companyData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 标题左侧图片
    cImg: {
      type: String,
      default: "icon-industryShare.png",
    },
    vHeight: {
      type: String,
      default: "445px",
    },
    title: {
      type: String,
      default: "三大产业分布",
    },
    // div ID
    domId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      
    };
  },
  watch: {
    companyData: {
      handler: function (val) {
       this.initEcharts();
      },
      deep: true,
    },
   
  },
  methods: {
   // 三大产业占比
    initEcharts() {
      let myChart = this.$echarts.init(document.getElementById(this.domId))
      // 绘制图表
      const option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          x: 'center', // 图例距离左的距离
          y: '2%', // 图例上下居中
          data: ['第一产业', '第二产业', '第三产业'],
          textStyle: {
            color: '#ffffff',
            fontSize: 25
          },
          icon: "roundRect", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
          itemWidth: 15, // 设置宽度
          itemHeight: 15, // 设置高度
          itemGap: 15 // 设置间距
        },
        color: ['#00FFC4', '#8300F4', '#FF9A01'],
        series: [{
          name: '',
          type: 'pie',
          radius: ['20%', '55%'],
          center: ['50%', '55%'],
          label: {
            normal: {
              formatter: params => {
                return (
                  `${params.name} \n ${params.value}%`
                )
              },
              color: '#fff',
              fontSize: 23,
              padding: [0, -5, 0, -5],
            }
          },
           // {value: this.companyData.first_industry_proportion, name: '第一产业'},
            // {value: this.companyData.second_industry_proportion, name: '第二产业'},
            // {value: this.companyData.third_industry_proportion, name: '第三产业'}
          data: this.companyData
        }]
      }
      myChart.setOption(option)
    },
  },
  created() {},
  mounted() {
    // this.$nextTick(() => {
      
    // });
    this.initEcharts();
  },
};
</script>
<style lang='scss' scoped>
</style>